<template>
  <div>
    <a-modal :width="670" :title="title" :visible="show" cancel-text="取消" ok-text="确定" @cancel="cancel" @ok="ok">
      <div class="employee-selector-wrapper">
        <div class="employee-selector-block">
          <a-input-search :placeholder="'选择' + title" style="width: 100%" @search="searchPeople" />
          <!-- 树形选择 -->
          <div class="employee-selector ove">
            <tree-node :tree-data.sync="roleList" @change="onChange" />
          </div>
        </div>
        <div class="employee-selector-block">
          <div class="employee-selector-title">已经选择的{{ title }}({{ selectedListTemp.length }})</div>
          <div class="employee-selector">
            <div v-for="(item, i) in selectedListTemp" :key="i" class="employee-selector-item">
              <div class="ove">
                <a-icon type="user" style="margin-right:6px;" />
                {{ item.name }}
              </div>
              <a-icon type="close" @click="deleteItem(item)" />
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import TreeNode from "./TreeNode";
import { mapState, mapGetters } from "vuex";
export default {
  name: "CompanyRole",
  components: { TreeNode },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "添加公司管理角色"
    },
    defaultSelectedKeys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      roleList: [],
      selectedListTemp: [],
      selectedKeysBeforeSearch: [],
      params: {
        name: ""
      },
      copyList: []
    };
  },
  computed: {
    ...mapGetters(["companyEmployeeList"]),
    ...mapState(["hr"])
  },
  watch: {
    show(val) {
      if (val) {
        this.copyList = JSON.parse(JSON.stringify(this.defaultSelectedKeys));
        this.selectedListTemp = this.defaultSelectedKeys;
        if (this.defaultSelectedKeys.length !== this.selectedListTemp.length) {
          this.roleList = this.formatCompanyData(this.companyEmployeeList);
        }
      }
    }
  },
  mounted() {
    this.roleList = this.formatCompanyData(this.companyEmployeeList);
  },
  methods: {
    onChange(item) {
      const isChose = item.isSelected;
      if (isChose) {
        return this.selectedListTemp.push(item);
      }
      this.selectedListTemp = this.selectedListTemp.filter(i => i.id !== item.id);
      // this.ergodic(item)
    },
    ergodicInit(isSearch) {
      const selectedKeys = [].concat(this.defaultSelectedKeys, isSearch ? this.selectedKeysBeforeSearch : []);
      this.roleList.map(item => {
        if (selectedKeys.includes(item.id.toString())) {
          item.isSelected = true;
        }
      });
      this.selectedListTemp = this.roleList.filter(item => item.isSelected);
    },
    ergodic(item) {
      this.selectedListTemp = this.roleList.filter(item => item.isSelected);
    },
    // 获取部门树
    getSelectDepTree(query) {
      const params = {
        subjectType: "company"
      };
      if (query) {
        params["roleQuery"] = query;
      }
      this.$request({
        url: `/hr/api/v1/users/listEmpAndRoleUserInCompany/${this.hr.companyId}`,
        params: { ...this.params }
      })
        .then(res => {
          this.roleList = this.formatCompanyData(res.data);
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    formatCompanyData(company) {
      return company.map(item => ({
        id: item.id,
        name: item.name + ` ${item.roleName || ""} ${item.childCompanyName || ""}`,
        isSelected: this.selectedListTemp.map(i => i.id).includes(item.id)
      }));
    },
    searchPeople(query) {
      this.params.name = query;
      this.selectedKeysBeforeSearch = this.selectedListTemp.map(item => item.id);
      this.getSelectDepTree(query);
    },
    deleteItem(item) {
      item.isSelected = false;
      this.ergodic(item);
    },
    ok() {
      const copyList = this.selectedListTemp.map(i => i.id);
      this.roleList.forEach(item => {
        item.isSelected = copyList.includes(item.id);
      });
      this.$emit("update:show", false);
      this.$emit("change", this.selectedListTemp);
    },
    cancel() {
      const copyList = this.copyList.map(i => i.id);
      this.roleList.forEach(item => {
        item.isSelected = copyList.includes(item.id);
      });
      this.$emit("update:show", false);
      this.$emit("change", this.copyList);
    }
  }
};
</script>
